<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    *
    {
        margin: 0;
        padding: 0;
        /* 内减模式 */
        box-sizing: border-box;
    }
    body
    {
        background-color: #f3f5f7;
    }
    /* 版心 */
    .wrapper
    {
        width: 1200px;
        margin: 0 auto;
    }
    /* 清除浮动 */
    .clearfix::before,.clearfix::after
    {
        content: "";
        display: table;
    }
    .clearfix::after
    {
        clear: both;
    }
    /* 去除li前面的小点 */
    li
    {
        list-style: none;
    }
    /* 去除链接的下划线 */
    a
    {
        text-decoration: none;
    }

    /* 餐厅信息 */
    .headline{
        
        float: left;
        margin-bottom: 20px;
        padding: 18px 0 40px 40px;
        width: 100%;
        height: 50px;
        background-color: #fff;
        box-shadow: 0px 2px 3px 0px rgba(118, 118,118,0.2);
        font: normal 500 25px 楷体;
    }

    .canteen{
        float: left;
        margin: 40px 10% 0px 10%;
        width: 80%;
        background-color: #fff;
    }
    .canteen ul{
        float: left;
        margin: 30px;
    }

    .canteen li{
        float: left;
        margin-bottom: 5px;
        width: 100%;
        height: 150px;
        background-color: #fff;
        box-shadow: 0px 2px 3px 0px rgba(118, 118,118,0.2);
        border-radius: 10px;
    }

    .canteen li img{
        float: left;
        width: 150px;
        height: 150px;
        
        
    }

    .canteen li h3{
        float: left;
        margin: 20px 0 0 20px ;
        font: normal  400 20px  楷体;
    }

    .canteen li span{
        float: right;
        margin: 20px 100px 0 0 ;
        font: normal  400 20px  楷体;
        color: black;
    }

    .canteen li .img1:hover{
        box-shadow: 0px 2px 3px 0px rgba(118, 118,118,0.2);
    }

    .canteen li .img2:hover{
        box-shadow: 0px 2px 3px 0px rgba(118, 118,118,0.2);
    }

    .canteen li .img1{
        float: left;
        margin: 20px 0 0 20px;
        width:25px;
        height: 25px;
        cursor: pointer;
    }

    .canteen li .img2{
        float: right;
        margin: 20px 70px 0 0;
        width: 25px;
        height: 25px;
        cursor: pointer;
    }

    .canteen li button{
        float: right;
        margin: 90px -190px 0 0;
        width: 100px;
        height: 40px;
        color: #fff;
        background-color: rgb(0,110,255);
        border: none;
        cursor: pointer;
    }

    .canteen li button:hover{
        box-shadow: 3px 3px 3px 0px rgba(7, 7, 7, 0.2);
    }

    .input{
        height: 20px;
        outline: none;
    }
    </style>
</head>
<body>
    <!-- 餐厅信息 -->
    <div class="headline"> 餐厅信息</div>
    <div class="canteen clearfix">   
        <ul>
            <li th:each="canteen:${canteens}">
                <img  th:src="${'/picture/新食堂一餐厅.jpg'}"/>

                <h3 id="text_change_1" th:text="${canteen.getName()}"></h3>
                <img class="img1"  th:src ="${'/picture/编辑 1.png'}" onclick="change()" alt=""/>
<!--                <button onclick="save()">保存</button>-->
                <img class="img2" th:src ="${'/picture/编辑 1.png'}"  alt=""/>

                <span>窗口数:<label th:text="${canteen.getWinCount()}"></label></span>
                <a th:href="@{/canteen/businessinfo/(id=${canteen.getId()})}"> <button>进入餐厅</button></a>
            </li>

<!--            <li>-->

<!--                <img src="./picture/新食堂一餐厅.jpg" alt="">-->
<!--                <h3 id="text_change_1">新食堂一餐厅</h3>-->
<!--                <img class="img1" onclick="change()" src="./picture/编辑 1.png" alt="">-->
<!--                &lt;!&ndash; <button onclick="save()">保存</button> &ndash;&gt;-->
<!--                <img class="img2" src="./picture/编辑 1.png" alt="">-->
<!--                <span>窗口数:</span>-->
<!--                <a href="window/canteeninfo.html"> <button>进入餐厅</button></a>-->

<!--            </li>-->
<!--            <li>-->
<!--                -->
<!--                <img src="./picture/新食堂二餐厅.jpg" alt="">-->
<!--                <h3>新食堂二餐厅</h3>-->
<!--                <img class="img1" src="./picture/编辑 1.png" alt="">-->
<!--                <img class="img2" src="./picture/编辑 1.png" alt="">-->
<!--                <span>窗口数:</span>-->
<!--                <a href="window/新食堂二餐厅1.html"><button>进入餐厅</button></a>-->
<!--                -->
<!--            </li>-->
<!--            <li>-->
<!--                -->
<!--                <img src="./picture/老食堂一餐厅.jpg" alt="">-->
<!--                <h3>老食堂一餐厅</h3> -->
<!--                <img class="img1" src="./picture/编辑 1.png" alt="">-->
<!--                <img class="img2" src="./picture/编辑 1.png" alt="">-->
<!--                <span>窗口数:</span>-->
<!--                <a href="window/老食堂一餐厅1.html"><button>进入餐厅</button></a>-->
<!--            -->
<!--            </li>-->
<!--            <li>-->
<!--                -->
<!--                <img src="./picture/老食堂二餐厅.jpg" alt="">-->
<!--                <h3>老食堂二餐厅</h3> -->
<!--                <img class="img1" src="./picture/编辑 1.png" alt="">-->
<!--                <img class="img2" src="./picture/编辑 1.png" alt="">-->
<!--                <span>窗口数:</span>-->
<!--                <a href="window/老食堂二餐厅1.html"><button>进入餐厅</button></a>-->
<!--                -->
<!--            </li>-->
<!--            <li>-->
<!--                -->
<!--                <img src="./picture/老食堂三餐厅.jpg" alt="">-->
<!--                <h3>老食堂三餐厅</h3> -->
<!--                <img class="img1" src="./picture/编辑 1.png" alt="">-->
<!--                <img class="img2" src="./picture/编辑 1.png" alt="">-->
<!--                <span>窗口数:</span>-->
<!--                <a href="window/老食堂三餐厅1.html"><button>进入餐厅</button></a>-->
<!--            -->
<!--            </li>-->
        </ul>
    </div>
</body>
</html>